<template>
  <div class="app__drag" v-if="showDrag" @click="clickDrag">
    <slot></slot>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const showDrag = ref(false)
const clickDrag = () => {
  proxy.$emit('clickDrag')
}
const open = () => {
  showDrag.value = true
}
const close = () => {
  showDrag.value = false
}
// 暴露方法给父组件
defineExpose({
  open,
  close
})
</script>
<style scoped>
.app__drag {
  background: #000;
  opacity: 0.3;
  top: 0;
  position: absolute;
  z-index: 999;
  width: 100vw;
  height: 100vh;
}
</style>